<template>
  <div id="headNavBar" class="clearfix">
    <div class="gw-logo">
      <img src="@/assets/images/logo-w.svg" alt="" />
    </div>
    <el-menu
      v-show="!isShowSearchBox"
      background-color="#1D82D2"
      :default-active="activeIndex"
      class="header-navbar"
      mode="horizontal"
      @select="handleSelect"
      text-color="#fff"
      active-text-color="#FFF"
    >
      <el-menu-item index="1">{{ $t("menu.HomePage") }}</el-menu-item>
      <el-menu-item index="2">{{ $t("menu.Encyclopedias") }}</el-menu-item>
      <el-menu-item index="3">{{ $t("menu.Application") }}</el-menu-item>
      <el-menu-item index="4">{{ $t("menu.AddressList") }}</el-menu-item>
    </el-menu>
    <div class="header-nav-right">
      <HeadSearch @clickIcon="clickIcon"></HeadSearch>
      <div class="userInfo clearfix">
        <img src="" :onerror="defaultpimg" alt="" />
        张杰
      </div>
      <LangSelect></LangSelect>
      <div class="logout">
        <i class="iconfont icon-tuichu"></i>
        {{ $t("menu.Logout") }}
      </div>
    </div>
  </div>
</template>
<script>
import LangSelect from "@/components/LangSelect";
import HeadSearch from "./HeadSearch.vue";
export default {
  components: { LangSelect, HeadSearch },
  data() {
    return {
      activeIndex: "1",
      isShowSearchBox: false,
      defaultpimg:
        'this.src="' + require("@/assets/images/defaultImg_person.png") + '"'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    clickIcon() {
      this.isShowSearchBox = !this.isShowSearchBox;
      console.log("clickIcon");
    }
  }
};
</script>
<style lang="scss" scoped>
#headNavBar {
  color: #fff;
  .gw-logo {
    width: 220px;
    height: 100%;
    line-height: 100%;
    float: left;
    img {
      float: left;
      width: 135px;
      margin-top: 15px;
    }
  }
  .header-navbar {
    float: left;
    min-width: 462px;
    li {
      height: 50px;
    }
    .is-active {
      background: rgb(23, 104, 18);
    }
  }
  .header-nav-right {
    float: right;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: right;
    .userInfo {
      font-size: 12px;
      padding: 0 10px;
      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
    }
    .logout {
      min-width: 70px;
    }
  }
}
</style>
